import React, {Component} from 'react';
import {TouchableOpacity, View, Text, Image, StyleSheet} from 'react-native';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

export default class PopularItem extends Component {
  render() {
    const {item} = this.props;
    if (!item || !item.owner) return null;
    let favoriteButton =
      <TouchableOpacity style={{padding: 6}}
                        onPress={() => {

                        }}
                        underlayColor={'transparent'}
      >
        <FontAwesome
          name={'star-o'}
          color={'red'}
          size={20}
        />
      </TouchableOpacity>;
    return (
      <TouchableOpacity>
        <View style={styles.cell_container}>
          <Text style={styles.title}>{item.full_name}</Text>
          <Text style={styles.description}>{item.description}</Text>
          <View style={styles.row}>
            <View style={styles.row}>
              <Text>作者：</Text>
              <Image style={styles.avatar}
                     source={{uri: item.owner.avatar_url}}
              />
            </View>
            <View style={styles.row}>
              <Text>Star: {item.stargazers_count}</Text>
            </View>
            {favoriteButton}
          </View>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  cell_container: {
    backgroundColor: 'white',
    padding: 10,
    marginLeft: 5,
    marginRight: 5,
    marginVertical: 3,
    borderColor: '#ddd',
    borderWidth: 0.5,
    borderRadius: 2,
    // ios下阴影效果
    shadowColor: 'gray',
    shadowOffset: {width: 0.5, height: 0.5},
    shadowOpacity: 0.4,
    shadowRadius: 1,
    // android下阴影效果
    elevation: 2
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  title: {
    fontSize: 16,
    marginBottom: 2,
    color: '#212121'
  },
  description: {
    fontSize: 12,
    marginBottom: 2,
    color: '#757575'
  },
  avatar: {
    width: 22, height: 22
  }
});